<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>方法与事件处理器checkbox</title>
</head>
<body>
    <div id="example-2">
        <input type="checkbox" id="checkBox" v-model="checked">
        <label for="checkBox">{{checked}}</label>
        <br>
        <label for="">checkBox:</label>
        <br>
        <input type="checkbox" id="basketball" value="basketBall" v-model="sports">
        <label for="basketball">basketBall</label> <br>
        <input type="checkbox" id="football" value="footBall" v-model="sports">
        <label for="football">footBall</label> <br>
        <input type="checkbox" id="volleyball" value="volleyball" v-model="sports">
        <label for="volleyball">volleyball</label> <br>
        <input type="checkbox" id="rugby" value="rugby" v-model="sports">
        <label for="rugby">rugby</label> <br>
        <p>{{sports | json}}</p>

        <label for="">radio:</label>
        <br>
        <input type="radio" id="jordan" value="jordan" v-model="star">
        <label for="jordan">jordan</label> <br>
        <input type="radio" id="james" value="james" v-model="star">
        <label for="james">james</label> <br>
        <input type="radio" id="kobe" value="kobe" v-model="star">
        <label for="kobe">kobe</label> <br>
        <p>{{star | json}}</p>
    </div>

<script src="../lib/vue.js"></script>
<script>
    var exampleVm = new Vue({
        el : "#example-2",
        data : {
            checked : false,
            sports : [],
            star : []
        }
    })
</script>
</body>
</html>